<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>文件上传</title>
    <style>
        #progressContainer {
            width: 100%;
            background-color: #f3f3f3;
            border: 1px solid #ccc;
            margin-top: 10px;
        }
        #progressBar {
            width: 0;
            height: 20px;
            background-color: #4caf50;
        }
        #cancelBtn {
            margin-top: 10px;
            display: none;
        }
         /* 隐藏文件选择框右侧的提示文字 */
        input[type="file"]::file-selector-button {
            display: inline-block;
        }

        input[type="file"] {
            color: transparent;
        }
    </style>
    <script src="./js/uri.js" charset="UTF-8"></script> 
    <script src="./js/file.js" charset="UTF-8"></script> 
</head>
<body>
    <input type="file" id="uploadInput" onChange="upload()">
    <button id="cancelBtn">取消上传</button>
    <div id="progressContainer">
        <div id="progressBar"></div>
    </div>
    <img id="preview" src="" alt="预览图片">
    
    <script> 
        // 使用方法示例
        function upload(){
        	debugger;
        	const cancelBtn = document.getElementById("cancelBtn"); 
        	
        	const allowedTypes = ["image/jpeg", "image/png", "application/pdf"];
            const maxSize = 5 * 1024 * 1024; // 最大文件大小限制为 5MB
            const file = event.target.files[0];
           
            // 上传文件的服务器地址
            const uploadUrl = "/ais/file/up";
            uploadFile(file, allowedTypes, maxSize, uploadUrl);
            cancelBtn.style.display = "block";
        } 
    </script>
</body>
</html>
